<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=divice-width, initial-scale=1.0" />
    <title>对诗词</title>
    <link rel="shortcut icon" href="./image/favicon.jpg" type="image/x-icon" />
    <!-- 样式表链接 -->
    <link rel="stylesheet" href="style.css" />
    <!--  <script src="game.js"></script> -->
  </head>
  <body>
    <h1>小游戏</h1>
    <!-- <section id="name">
      你好，<span id="username"></span>
   </section> -->
    <!-- 问题和答案 -->
    <div>
      <h2 id="question"></h2>
      <input type="text" id="answer" onkeydown="handleKeyPress(event)">
      <button onclick="checkAnswer()">提交</button>
    </div>

    <!-- Next和Prev按钮 -->
    <div>
      <button onclick="prevLevel()" id="prevBtn" disabled>上一关</button>
      <button onclick="nextLevel()" id="nextBtn">下一关</button>
      <button onclick="showAnswer()">显示答案</button>
      <!-- 新增按钮 -->
    </div>

    <!-- 关卡和积分统计 -->
    <div>
      <h3>关卡: <span id="level">1</span></h3>
      <h3>积分: <span id="score">0</span></h3>
    </div>
    <span id="by">
      <p>By:三峡大学计算机协会</p>
      <p>建站部</p>
    </span>

    <!-- <img src="./image/ctgu2.png" alt="" id="img_1" > -->
    <section id="big">
      <img src="./image/favicon2.png" alt="" id="img_2" />
      <section id="text">
        <span
          >三峡大学计算机协会成立于2001年,它是一群热爱计算机的99级校友一手创办的。现如今,在计算机与信息学院团委的支持下,由学生自主管理。经由历届各位协会领导人的努力,它逐渐发展壮大,并在探索中取得了辉煌佳绩。
          协会成立的宗旨是：
          <p>以人为本，为立足高科技的新世纪而奋斗。</p>
        </span>
      </section>
    </section>
    <!--  <section id="name">
       你好，<span id="username"></span>
    </section> -->

    <!-- 游戏脚本 -->
    <script>
      // 初始化游戏状态

      level = 1;
      console.log(level);
      score = 0;

      // 问题和答案数据
      const questions = [
        {
          question: "人面不知何处去",
          answer: "桃花依旧笑春风",
        },
        {
          question: "西塞山前白鹭飞",
          answer: "桃花流水鳜鱼肥",
        },
        {
          question: "竹外桃花三两枝",
          answer: "春江水暖鸭先知",
        },
        {
          question: "桃之夭夭",
          answer: "灼灼其华",
        },
        {
          question: "人间四月芳菲尽",
          answer: "山寺桃花始盛开",
        },
        {
          question: "巴东三峡巫峡长",
          answer: "猿鸣三声泪沾裳",
        },
        {
          question: "夜发清溪向三峡",
          answer: "思君不见下渝州",
        },
        {
          question: "春城无处不飞花",
          answer: "寒食东风御柳斜",
        },
        {
          question: "春风得意马蹄疾",
          answer: "一日看尽长安花",
        },
        {
          question: "春色满园关不住",
          answer: "一枝红杏出墙来",
        }, //10

        {
          question: "云想衣裳花想容",
          answer: "春风拂槛露华浓",
        },
        {
          question: "渭城朝雨浥轻尘",
          answer: "客舍青青柳色新",
        },
        {
          question: "春风十里扬州路",
          answer: "卷上珠帘总不如",
        },
        {
          question: "青画溪头翠水家",
          answer: "水边短竹夹桃花",
        },
        {
          question: "寻得桃源好避秦",
          answer: "桃红又见一年春",
        },
        {
          question: "长恨春归无觅处",
          answer: "不知转入此中来",
        },
        {
          question: "黄师塔前江水东",
          answer: "春光懒困倚微风",
        },
        {
          question: "东风不为吹愁去",
          answer: "春日偏能惹恨长",
        },
        {
          question: "玄都观里桃千树",
          answer: "尽是刘郎去后栽",
        },
        //20
        {
          question: "去年今日此门中",
          answer: "人面桃花相映红",
        },
        {
          question: "东边日出西边雨",
          answer: "道是无情却有情",
        },
        {
          question: "口夸远岭青千峰",
          answer: "心忆平波绿一蒿",
        },
        {
          question: "桃花流水窅然去",
          answer: "别有天地非人间",
        },
        {
          question: "桃花潭水深千尺",
          answer: "不及汪伦送我情",
        },
        {
          question: "等闲识得东风面",
          answer: "万紫千红总是春",
        },

        {
          question: "青青园中葵",
          answer: "朝露待日晞",
        },
        {
          question: "谁家玉笛暗飞声",
          answer: "散入春风满洛城",
        },

        {
          question: "他年我若为青帝",
          answer: "报与桃花一处开",
        },
        {
          question: "双飞燕子几时回",
          answer: "夹岸桃花蘸水开",
        },
        {
          question: "五更鼓角声悲壮",
          answer: "三峡星河影动摇",
        },
        {
          question: "春水碧于天",
          answer: "画船听雨眠",
        },
        {
          question: "俏也不争春",
          answer: "只把春来报",
        },
        {
          question: "回首向来萧瑟处，归去",
          answer: "也无风雨也无晴",
        },
        {
          question: "峨眉山月半轮秋",
          answer: "影入平羌江水流",
        },

        {
          question: "卧龙跃马终黄土",
          answer: "人事依依漫寂寥",
        },
        {
          question: "朝辞白帝彩云间",
          answer: "千里江陵一日还",
        },
        {
          question: "孤帆远影碧空尽",
          answer: "唯见长江天际流",
        },
      ];

      // 从问题数组中随机选择6个问题来生成关卡
      const levelQuestions = questions
        .sort(() => 0.5 - Math.random())
        .slice(0, 6);

      // 检查答案并更新游戏状态
      function checkAnswer() {
        const answer = document.getElementById("answer").value;
        if (
          answer.toLowerCase() ===
          levelQuestions[level - 1].answer.toLowerCase()
        ) {
          alert("回答正确！");
          score++;

          if (level < 6) {
            level++;
          } else {
            alert("你已经通关了！你的得分是：" + score);
          }
        } else {
          if (level < 6) {
            alert("回答错误，请再试一次。");
          } else {
            alert("你已经通关了！你的得分是：" + score);
          }
        }
        /* else {
    
     alert("回答错误，请再试一次。");
   } */
        document.getElementById("score").innerHTML = score;
        document.getElementById("level").innerHTML = level;
        document.getElementById("answer").value = "";
        updateQuestion();
        updateButtons();
      }

      // 更新问题和答案输入框
      function updateQuestion() {
        document.getElementById("question").innerHTML =
          levelQuestions[level - 1].question;
        document.getElementById("answer").value = "";
      }

      // Next和Prev按钮点击事件处理程序
      function nextLevel() {
        level++;
        updateQuestion();
        updateButtons();
        document.getElementById("level").innerHTML = level;
      }

      function prevLevel() {
        level--;
        updateQuestion();
        updateButtons();
        document.getElementById("level").innerHTML = level;
      }

      // 更新Next和Prev按钮状态
      function updateButtons() {
        if (level === 1) {
          document.getElementById("prevBtn").disabled = true;
        } else {
          document.getElementById("prevBtn").disabled = false;
        }

        if (level === 6) {
          document.getElementById("nextBtn").disabled = true;
        } else {
          document.getElementById("nextBtn").disabled = false;
        }
      }
      //更新关卡

      // 初始化第一个问题
      updateQuestion();

      //鼠标移入事件
      let text = document.getElementById("text");
      let big = document.getElementById("big");
      big.onmouseover = function () {
        text.style.display = "block";
      };
      big.onmouseout = function () {
        text.style.display = "none";
      };

      function showAnswer() {
        alert("当前问题的答案是：" + levelQuestions[level - 1].answer);
      }



      // 新增函数，处理键盘事件，如果是回车键则调用 checkAnswer 函数
    function handleKeyPress(event) {
        if (event.key === "Enter") {
            checkAnswer();
        }
    }
      //输入用户名事件

      /* const username = localStorage.getItem("username");

if (username) {
  alert("欢迎回来，" + username + "！");
} else {
  // 如果没有保存过用户名，则弹出输入框
  const newUsername = prompt("请输入你的姓名与学号：");
  
  // 保存新的用户名
  localStorage.setItem("username", newUsername);
  
  alert("你好，" + newUsername + "！");
} */
    </script>
  </body>
</html>
